<template>
  <div class="p-4">
    <div class="mb-4 flex items-center space-x-2">
      <el-input
        v-model="searchForm.platform"
        placeholder="平台类型"
        clearable
        style="width: 200px"
      />
      <el-input v-model="searchForm.name" placeholder="配置名称" clearable style="width: 200px" />
      <el-button type="primary" @click="loadData">查询</el-button>
      <el-button type="success" @click="openEditDialog()">新增配置</el-button>
    </div>

    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column prop="name" label="配置名称" />
      <el-table-column prop="platform" label="平台类型" />
      <el-table-column prop="model" label="模型名称" />
      <el-table-column prop="baseUrl" label="Base URL" />
      <el-table-column prop="isStream" label="流式" :formatter="boolFormatter" width="70" />
      <el-table-column prop="isActive" label="启用" width="80">
        <template #default="{ row }">
          <el-switch v-model="row._active" @change="(val) => handleSwitchChange(val, row)" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button size="small" @click="openEditDialog(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="remove(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="mt-4"
      background
      layout="total, prev, pager, next"
      :total="total"
      :page-size="pageSize"
      @current-change="handlePageChange"
    />

    <!-- 编辑弹窗 -->
    <el-dialog v-model="dialogVisible" :title="form.id ? '编辑配置' : '新增配置'" width="600px">
      <el-form :model="form" label-width="100px">
        <el-form-item label="配置名称"><el-input v-model="form.name" /></el-form-item>
        <el-form-item label="平台类型"><el-input v-model="form.platform" /></el-form-item>
        <el-form-item label="模型名称"><el-input v-model="form.model" /></el-form-item>
        <el-form-item label="BaseURL"><el-input v-model="form.baseUrl" /></el-form-item>
        <el-form-item label="API密钥"><el-input v-model="form.apiKey" /></el-form-item>
        <el-form-item label="温度">
          <el-input-number v-model="form.temperature" :step="0.1" :min="0" :max="1" />
        </el-form-item>
        <el-form-item label="是否流式">
          <el-switch v-model="form.isStream" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item label="启用">
          <el-switch v-model="form.isActive" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item label="备注"><el-input type="textarea" v-model="form.remark" /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  getPlatformConfigPageApi,
  savePlatformConfigApi,
  updatePlatformConfigApi,
  deletePlatformConfigApi,
  activatePlatformConfigApi
} from '@/api/aiPlatform'

const tableData = ref([])
const total = ref(0)
const pageSize = 10
const currentPage = ref(1)

const searchForm = ref({ platform: '', name: '' })

const form = ref<any>({})
const dialogVisible = ref(false)

const boolFormatter = (_: any, __: any, value: number) => (value === 1 ? '是' : '否')

const loadData = async () => {
  const res = await getPlatformConfigPageApi({
    page: currentPage.value,
    size: pageSize,
    ...searchForm.value
  })
  if (res.success) {
    tableData.value = res.result.records.map((item: any) => ({
      ...item,
      isActive: Number(item.isActive),
      isStream: Number(item.isStream),
      temperature: Number(item.temperature),
      _active: Number(item.isActive) === 1
    }))
    total.value = res.result.total
  }
}

const handleSwitchChange = async (val: boolean, row: any) => {
  if (val) {
    const res = await activate(row.id)
    if (res.success) {
      row.isActive = 1
      row._active = true
      ElMessage.success('已启用')
      loadData()
    }
  } else {
    row._active = true
    ElMessage.warning('请切换其他配置为启用，当前不可禁用')
  }
}

const openEditDialog = (row?: any) => {
  form.value = row ? { ...row } : { isStream: 0, isActive: 1, temperature: 0.7 }
  dialogVisible.value = true
}

const submit = async () => {
  const handler = form.value.id ? updatePlatformConfigApi : savePlatformConfigApi
  const res = await handler(form.value)
  if (res.success) {
    ElMessage.success('保存成功')
    dialogVisible.value = false
    loadData()
  }
}

const remove = async (id: number) => {
  await ElMessageBox.confirm('确认删除该配置吗？', '提示')
  const res = await deletePlatformConfigApi(id)
  if (res.success) {
    ElMessage.success('已删除')
    loadData()
  }
}

const activate = async (id: number) => {
  const res = await activatePlatformConfigApi(id)
  return res
}

const handlePageChange = (val: number) => {
  currentPage.value = val
  loadData()
}

onMounted(loadData)
</script>

<style scoped></style>
